body {
	margin:0;
	padding:0;
	font-family: Verdana, Helvetica, sans-serif;
    font-size:0.9em;
}

#header {
  padding: 8px 8px 8px 8px;
}

#header #whoseMove {
  position:absolute;
  top:-12px;
  font-size:1.3em;
}

#header ul {
  font-size:0.8em;
  margin:0;
  margin-left:200px;
  padding:0 0 0 0;
  text-align: right;
}

#header li{
  display: inline;
  white-space:nowrap;
  overflow:auto;
}


#main{
  margin-top:0px;
}

/*
#sidebar {
  float: right;
  width: 200px;
  border: 1px solid black;
  background-color: #dddddd;
}
*/

#boardMain {
  float: left;
}

#boardMain #board {
  position: relative;
}


#boardMain #zoomControls {
  height:30px;
  width:115px;
  margin-left:300px;
}

#boardMain #zoomControls ul {
  margin:3px 3px 0 0;
  padding:0 0 0 0;
  text-align: right;
}

#boardMain #zoomControls li{
  display: inline;
}

#boardMain #message {
  float:left;
}

.groupName {
  font-size: 0.7em;
  text-align:center;
}

#boardInfo {
  width:330px;  /*defaults - width for vertical bar, height for horizontal, used by size.js*/
  height:173px;
}

#boardInfo.verticalBar {
}

#boardInfo.horizontalBar {
  float:left;
}

#boardInfo.verticalBar #controls {
  height:100%;
  width:68px;
  float:left;
}

#boardInfo.horizontalBar #controls {
  width:100%;
  height:68px;
}

#boardInfo #controls li input.large{
  width:64px;
  height:64px;
}

#boardInfo #controls li input{
  width:48px;
  height:48px;
}

#boardInfo.horizontalBar #controls li input {
  vertical-align:text-top;
}

#boardInfo.horizontalBar #controls ul {
  margin:3px 3px 0 0;
  padding:0 0 0 0;
  text-align:left;
}

#boardInfo.horizontalBar #controls li{
  display: inline;

}

#boardInfo.verticalBar #controls ul {
  margin:3px 3px 0 0;
  padding:0 0 0 0;
  text-align: right;
}

#boardInfo.verticalBar #controls li{
  padding:0;
  margin: 0 0 0 5px;
  list-style-type:none;
  text-align:left;
}

#boardInfo.verticalBar #controls #separator{
  padding-bottom: 20px;
}

#boardInfo.horizontalBar #controls #separator{
  padding-right: 20px;
}

#boardInfo.horizontalBar #gameSettings {
  overflow-y:auto;
  width:110px;
  height:100px;
  font-size: 0.7em;
}

.description {
  color: black;
  font-size: 0.6em;
  display:inline;
}

.checkbox {
  font-size: 0.7em;
}

select {
  font-size: 0.7em;
}

button {
  margin-top:2px;
}

#activePlayer {
  float:left;
  margin: -20px 0 0 0;
  padding-left: 5px;
  width: 120px;
  height: 100px;
}

#activePlayer p.color {
  font-size: 1.5em;
  margin-bottom:5px;
}

#moveHistory {
  width:60px;
  overflow-y:auto;
}

#boardInfo.verticalBar #moveHistory {
  float:left;
  height:30%;
}

#boardInfo.horizontalBar #moveHistory {
  margin-left:370px;
  margin-top:-100px;
  height:100px;
}

#boardInfo.horizontalBar .groupName {
  display:none;
}

#moveHistory ol {
  width: 100%;
  margin-left: -40px;
  margin-top: 0;
}

#moveHistory li {
  text-align: left;
  list-style-type:none;
  display: block;
}

#boardInfo.verticalBar #viewers ul {
  float:left;
  margin-left: -30px;
  margin-top: 0;
}

#boardInfo.horizontalBar #viewers ul {
  margin-left:400px;
  margin-top:-100px;
  height:100px;
  overflow:hidden;
}

#viewers li {
  text-align: left;
  display: block;
}


#chat {
  float:left;
  font-size:0.6em;
  margin-top: 20px;
}


#chat #chats {
  padding:10px;
  width:230px;
  height:80px;
  overflow:auto;
}

.player {
  width: 120px;
}

.player img {
  position:absolute;
}

.player #status {
  float:left;
  margin-top: 5px;
}

.player #name {
  display:inline;
  padding-left:16px;
  font-weight: bold;
  font-size: 0.8em;
}

.player #rating {
  font-size: 0.6em;
  font-weight: normal;
  margin-top:-2px;
  margin-left:16px;

}
/*
#footer {
  clear: both;
  border: 1px solid red;
  background-color: #ff9999;
  height:30px;
}

#footer #message {
  position:relative;
  top: -12px;
  left: 8px;
}
*/
.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

